<template>
  <div style="padding: 10px 15px">
    <div class="containerdiv">
      <!-- 查询条件-->
      <div class="filter-container">
        <el-input
          v-model="listQuery.title"
          placeholder="请输入商户订单号"
          style="
            width: 42%;
            background: #ffffff;
            opacity: 1;
            border-radius: 4px;
          "
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <!--
          <el-select
          v-model="form.orgID"
          filterable
          class="filter-item"
          placeholder="请选择门店"
        >
          <el-option
            v-for="item in orgoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span v-html="item.label" />
          </el-option>
        </el-select>
        -->
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >查询</el-button>
      </div>
      <div ref="detailref" class="detaildiv" :style="{ height: bottom + 'px' }">
        <div class="detailhead">
          <div class="orderdiv">
            <span class="orderid">{{
              form.payid || paymachineform.payid
            }}</span>
            <br>
            <span class="ordername">商户订单号</span>
          </div>
          <div class="paymachinesttdiv">
            <span
              v-if="paymachineform.sttstr == ''"
              class="paymachinestt"
            />
            <span
              v-else-if="
                paymachineform.sttstr == '1' && paymachineform.stt == '1'
              "
              class="paymachinestt"
            >支付成功</span>
            <span
              v-else
              class="paymachinestt"
              :style="{ color: 'red' }"
            >支付失败</span>
            <br>
            <span class="paymachinesttname">前置机交易状态</span>
          </div>
          <div class="paychannelsttdiv">
            <span v-if="form.sttstr == ''" class="paychannelstt" />
            <span
              v-else-if="form.sttstr == '1' && form.stt == '1'"
              class="paychannelstt"
            >支付成功</span>
            <span
              v-else
              class="paychannelstt"
              :style="{ color: 'red' }"
            >支付失败</span>
            <br>
            <span class="paychannelsttname">支付渠道交易状态</span>
          </div>
          <div class="orderrelsttdiv">
            <span v-if="form.sttstr == ''" class="orderrelstt" />
            <span
              v-else-if="form.sttstr == '1' && form.stt == '1'"
              class="orderrelstt"
            >放行</span>
            <span
              v-else
              class="orderrelstt"
              :style="{ color: 'red' }"
            >暂不放行</span>
            <br>
            <span class="orderrelsttname">订单放行状态</span>
          </div>
        </div>
        <div class="detailcontent">
          <div class="itemdiv">
            <div class="div1">
              门店编号：<span>{{ paymachineform.orgname }}</span>
            </div>
            <div class="div2">
              收银机号：<span>{{ paymachineform.recdevice }}</span>
            </div>
            <div class="div3">收银员：{{ paymachineform.recman }}<span>-</span></div>
          </div>
          <div class="itemdiv">
            <div class="div1">
              第三方平台订单号：<span>{{
                form.transid || paymachineform.transid
              }}</span>
            </div>
            <div class="div2">支付完成时间：<span>-</span></div>
          </div>
          <div class="itemdiv">
            <div class="div1">
              支付方式：<span>{{ form.paytyp || paymachineform.paytyp }}</span>
            </div>
            <div class="div2">
              支付通道：<span>{{
                form.paychannel || paymachineform.paychannel
              }}</span>
            </div>
          </div>
          <div class="itemdiv">
            <div class="div1">交易类型：{{ form.typ || paymachineform.typ }}<span>-</span></div>
            <div class="div2">
              收款账户：<span>{{ form.pid || paymachineform.pid }}</span>
            </div>
          </div>
          <div class="itemdiv">
            <div class="div1">
              订单金额：<span>{{ form.price || paymachineform.price }}</span>
            </div>
            <div class="div2">退款金额：<span>-</span></div>
            <div class="div3">销售金额：<span>-</span></div>
          </div>
          <div class="itemdiv">
            <div class="div1">退款单号：<span>-</span></div>
            <div class="div2">撤销单号：<span>-</span></div>
          </div>
          <div class="itemdiv">
            <div class="div1">交易备注：<span>-</span></div>
          </div>
        </div>

        <!--table-->
        <el-table
          v-show="false"
          v-loading="listLoading"
          :data="PayRecordHelpData"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <!--
      <el-table-column label="门店编号" align="right" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.orgid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收银机号" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.recdevice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收银员" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.recman }}</span>
        </template>
      </el-table-column>
      -->
          <el-table-column label="商户订单号" align="left" min-width="350px">
            <template slot-scope="{ row }">
              <span>{{ row.payid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="第三方平台平台订单号"
            align="left"
            min-width="350px"
          >
            <template slot-scope="{ row }">
              <span>{{ row.transid }}</span>
            </template>
          </el-table-column>
          <!--
      <el-table-column label="支付完成时间" align="left" min-width="156px">
        <template slot-scope="{ row }">
          <span>{{ row.reqdt }}</span>
        </template>
      </el-table-column>
      -->
          <el-table-column label="支付方式" align="left" min-width="150px">
            <template slot-scope="{ row }">
              <span>{{ row.paytyp }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付通道" align="left" min-width="200px">
            <template slot-scope="{ row }">
              <span>{{ row.paychannel }}</span>
            </template>
          </el-table-column>
          <!--
      <el-table-column label="交易状态" align="left" min-width="90px">
        <template slot-scope="{ row }">
          <span
            :class="[
              row.stt == 1 || row.stt == 2 || row.stt == 3 || row.stt == 5
                ? 'green'
                : 'red',
            ]"
            >{{ row.sttstr }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="交易类型" align="left" min-width="90px">
        <template slot-scope="{ row }">
          <span>{{ row.typ }}</span>
        </template>
      </el-table-column>
      -->
          <el-table-column label="收款账户" align="left" min-width="230px">
            <template slot-scope="{ row }">
              <span>{{ row.pid }}</span>
            </template>
          </el-table-column>

          <el-table-column label="订单金额/元" align="right" min-width="150px">
            <template slot-scope="{ row }">
              <span>{{ row.price }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--table end -->
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { AjaxToken } from '@/api/common'
import { SelectAjax } from '@/api/common'
import { Jurisdiction } from '@/api/common'
import sessionStorage from '@/api/Storage'
import 'url-search-params-polyfill' // 兼容IE，否则无法识别URLSearchParams
export default {
  name: 'PayRecordHelp',
  components: { Pagination },
  data() {
    return {
      logincpnid: '',
      multipleSelection: [],
      formLabelWidth: '120px',
      PayRecordHelpData: null,
      orgoptions: [],
      bottom: 0,
      listQuery: {
        title: '',
        total: 0,
        page: 1,
        limit: 10
      },
      listQueryOrg: {
        title: '',
        total: 0,
        page: 1,
        limit: 30
      },
      listLoading: false,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      dialogStatus: '',
      form: {
        cpnID: '',
        payid: '',
        transid: '',
        paytyp: '',
        paychannel: '',
        pid: '',
        price: '',
        stt: '',
        sttstr: '',
        orgid: '',
        orgname: '',
        recdevice: ''
      },
      paymachineform: {
        payid: '',
        transid: '',
        paytyp: '',
        paychannel: '',
        pid: '',
        price: '',
        stt: '',
        sttstr: '',
        orgid: '',
        orgname: '',
        recdevice: ''
      }
    }
  },

  // 初始化
  created() {
    var userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
    this.logincpnid = userinfo.cpnId
    this.form.cpnID = userinfo.cpnId
    this.fetchDataOrg()
  },
  mounted() {
    // 当前元素与底部的距离 = 可视区窗口高度 - 当前元素与页面顶部距离 - 当前元素高度
    this.bottom =
      window.innerHeight -
      this.$refs.detailref.getBoundingClientRect().y -
      this.$refs.detailref.getBoundingClientRect().height
  },
  methods: {
    // 弹层关闭
    handleClose() {},
    // 权限
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this)
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 多选赋值
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    // 新增
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    // 编辑
    handleClick(row) {},
    // 保存
    saveForm() {},
    // 删除
    deleteClick(row) {},
    // 查询
    fetchData() {
      const loading = this.$loading({
        lock: true,
        text: '查询中...请勿关闭页面!',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var params = new URLSearchParams()
      params.append(
        'Parms',
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          '}'
      )
      var user = JSON.parse(sessionStorage.getItem('userinfo'))
      params.append('CpnID', user.cpnId)
      // params.append("AlisNme", this.listQuery.title);
      params.append('OrgID', this.form.orgID)
      params.append('PayID', this.listQuery.title)
      backstage.GetRealOrder(this, params, loading)
    },
    fetchDataOrg() {
      backstage.GetCpnOrgList(this, this.form.cpnID)
    }
  }
}
// 后台事件
var backstage = {
  GetCpnOrgList: function(thisobj, cpnid) {
    SelectAjax(
      'GetCpnOrgList?cpnid=' + cpnid + '',
      function(response) {
        var body = response.data
        thisobj.orgoptions = []
        body.data.forEach((element) => {
          thisobj.orgoptions.push({
            value: element.value,
            label: element.text
          })
        })
      },
      function(error) {}
    )
  },
  // 获取PayRecordHelp集合
  GetRealOrder: function(thisobj, params, loading) {
    AjaxToken(
      thisobj,
      'GetRealOrder',
      params,
      'post',
      function(res) {
        loading.close()
        console.log(res)
        var body = res.data.data
        // thisobj.PayRecordHelpData = [];
        // thisobj.PayRecordHelpData = body.rows;
        // thisobj.listQuery.page = body.page;
        // thisobj.listQuery.total = body.records;
        thisobj.form = body['OtherPay']
        thisobj.paymachineform = body['PayMachine']
      },
      function(err) {
        loading.close()
      }
    )
  }
}
</script>

<style lang="scss" scoped>
.containerdiv {
  width: 100%;
  height: 100%;
}
.detaildiv {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  background-color: #ffffff;
}
.filter-container {
  width: auto;
  margin-left: 15%;
}
.detailhead {
  height: 120px;
  background-color: #ffffff;
  border-bottom: 1px dashed #e6e6e6;
  font-family: Source Han Sans CN;
  font-weight: 400;
  opacity: 1;
}
.orderdiv {
  float: left;
  width: 50%;
  margin-top: 30px;
  margin-left: 5%;
}
.orderdiv .orderid {
  width: 261px;
  height: 18px;
  font-size: 18px;
  line-height: 31px;
  color: #409eff;
}
.orderdiv .ordername {
  width: 70px;
  height: 14px;
  font-size: 14px;
  line-height: 24px;
  color: #c3cad2;
}
.paymachinesttdiv {
  float: left;
  width: 14%;
  margin-top: 30px;
  text-align: right;
}
.paymachinesttdiv .paymachinestt {
  width: 72px;
  height: 18px;
  font-size: 18px;
  line-height: 31px;
  color: #1ab448;
}
.paymachinesttdiv .paymachinesttname {
  width: 98px;
  height: 14px;
  font-size: 14px;
  line-height: 24px;
  color: #c3cad2;
}
.paychannelsttdiv {
  float: left;
  width: 12%;
  margin-left: 2%;
  margin-top: 30px;
  border-left: 1px solid #dbeafd;
  text-align: right;
}
.paychannelsttdiv .paychannelstt {
  width: 72px;
  height: 18px;
  font-size: 18px;
  line-height: 31px;
  color: #1ab448;
}
.paychannelsttdiv .paychannelsttname {
  width: 112px;
  height: 14px;
  font-size: 14px;
  line-height: 24px;
  color: #c3cad2;
}
.orderrelsttdiv {
  float: left;
  width: 10%;
  margin-left: 2%;
  margin-top: 30px;
  border-left: 1px solid #dbeafd;
  text-align: right;
}
.orderrelsttdiv .orderrelstt {
  width: 36px;
  height: 18px;
  font-size: 18px;
  line-height: 31px;
  color: #1ab448;
}
.orderrelsttdiv .orderrelsttname {
  width: 84px;
  height: 14px;
  font-size: 14px;
  line-height: 24px;
  color: #c3cad2;
}
.detailcontent {
  clear: both;
  margin-left: 5%;
  margin-top: 2%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 24px;
  color: #959ea8;
  opacity: 1;
}
.itemdiv {
  clear: both;
  margin-bottom: 10px;
  width: 100%;
  height: 25px;
  margin-bottom: 1%;
}
.itemdiv div span {
  color: #304156;
}
.itemdiv div {
  float: left;
}
.itemdiv .div1 {
  width: 40%;
}
.itemdiv .div2 {
  width: 25%;
  margin-left: 3%;
}
.itemdiv .div3 {
  width: 20%;
  margin-left: 9%;
}
</style>
